@use "../../variables.scss" as *;

.spg-input {
  @include ctrDefaultFont;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  background-color: var(--ctr-editor-background-color, var(--sjs-layer-3-background-500, #f4f4f4ff));
  box-sizing: border-box;
  width: 100%;
  border: none;
  border-radius: var(--ctr-editor-corner-radius, var(--sjs-corner-radius-x075));
  box-shadow: inset 0 0 0 var(--ctr-editor-border-width, var(--sjs-stroke-x1)) var(--ctr-editor-border-color, var(--sjs-border-10, #dcdcdcff));
  transition: box-shadow $creator-transition-duration;

  padding-top: calc(var(--ctr-editor-padding-top, var(--sjs-spacing-x05)) + var(--ctr-editor-content-margin-top, var(--sjs-spacing-x1)));
  padding-right: calc(var(--ctr-editor-padding-right, var(--sjs-spacing-x05)) + var(--ctr-editor-content-margin-right, var(--sjs-spacing-x150)));
  padding-bottom: calc(var(--ctr-editor-padding-bottom, var(--sjs-spacing-x05)) + var(--ctr-editor-content-margin-bottom, var(--sjs-spacing-x1)));
  padding-left: calc(var(--ctr-editor-padding-left, var(--sjs-spacing-x05)) + var(--ctr-editor-content-margin-left, var(--sjs-spacing-x150)));
  outline: none;
  color: var(--ctr-editor-content-text-color, var(--sjs-layer-3-foreground-100, #000000e6));
}

.spg-input::placeholder {
  color: var(--ctr-editor-content-text-color-placeholder, var(--sjs-layer-3-foreground-50, #00000080));
}

.spg-input {
  &::-webkit-datetime-edit,
  &::-webkit-datetime-edit-fields-wrapper,
  &::-webkit-datetime-edit-ampm-field,
  &::-webkit-datetime-edit-day-field,
  &::-webkit-datetime-edit-hour-field,
  &::-webkit-datetime-edit-millisecond-field,
  &::-webkit-datetime-edit-minute-field,
  &::-webkit-datetime-edit-month-field,
  &::-webkit-datetime-edit-second-field,
  &::-webkit-datetime-edit-week-field,
  &::-webkit-datetime-edit-year-field
  {
    display: flex;
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
  }
}
.spg-input[type="date"], 
.spg-input[type="datetime-local"] {
  &:empty {
    min-height: calc(var(--ctr-font-default-line-height, var(--sjs-line-height-x3)) +
     var(--ctr-editor-padding-top, var(--sjs-spacing-x05)) +
     var(--ctr-editor-content-margin-top, var(--sjs-spacing-x1)) +
     var(--ctr-editor-padding-bottom, var(--sjs-spacing-x05)) + 
     var(--ctr-editor-content-margin-bottom, var(--sjs-spacing-x1)));
  }
}

.spg-input:focus:not(:disabled),
.spg-input.spg-dropdown:focus:not(:disabled),
.spg-input.spg-dropdown:focus-within:not(:disabled),
.spg-input-container:focus-within {
  box-shadow: inset 0 0 0 var(--ctr-editor-border-width-focused, var(--sjs-stroke-x2)) var(--ctr-editor-border-color-focused, var(--sjs-primary-background-500, #19b394ff));
}

input.spg-input:focus:read-only {
  box-shadow: inset 0 0 0 var(--ctr-editor-border-width, var(--sjs-stroke-x1)) var(--ctr-editor-border-color, var(--sjs-border-10, #dcdcdcff));
}

.spg-input:disabled,
.spg-input:disabled::placeholder,
input.spg-input:read-only,
input.spg-input:read-only::placeholder {
  color: rgb(from var(--ctr-editor-content-text-color-disabled, var(--sjs-layer-1-foreground-100, #000000e6)) r g b / var(--ctr-editor-content-text-opacity-disabled, 0.25));
  background-color: var(--ctr-editor-background-color-disabled, var(--sjs-layer-1-background-500, #ffffffff));
}

.spg-input[type="color"] {
  padding-left: 0;
  padding-right: 0;
  min-width: calcSize(8);
}

.spg-input__edit-button {
  position: relative;
  box-sizing: border-box;
  appearance: none;
  background: transparent;
  border: none;
  outline: none;
  border-radius: var(--ctr-editor-button-corner-radius, var(--sjs-corner-radius-x05));
  padding: var(--ctr-editor-button-padding-top, var(--sjs-spacing-x1)) var(--ctr-editor-button-padding-right, var(--sjs-spacing-x1))
    var(--ctr-editor-button-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-editor-button-padding-left, var(--sjs-spacing-x1));
  line-height: 0;
  transition: background $creator-transition-duration, opacity $creator-transition-duration;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;

  &:focus,
  &:hover {
    background: var(--ctr-editor-button-background-color-hovered, var(--sjs-layer-3-background-400, #eaeaeaff));
  }

  &:active {
    opacity: var(--ctr-editor-button-icon-opacity-pressed, 0.5);
  }

  svg {
    width: var(--ctr-editor-button-icon-width, var(--sjs-font-size-x3));
    height: var(--ctr-editor-button-icon-height, var(--sjs-font-size-x3));
    fill: var(--ctr-editor-button-icon-color, var(--sjs-layer-3-foreground-75, #000000bf));
  }
}

.spg-input-container--multiline .spg-input__edit-button {
  align-self: flex-end;
}

.spg-input__edit-button--disabled,
.spg-input__edit-button:disabled {
  opacity: var(--ctr-editor-button-icon-opacity-disabled, 0.25);
  background: transparent;

  svg {
    fill: var(--ctr-editor-button-icon-color-disabled, var(--sjs-layer-3-foreground-75, #000000bf));
  }
}

.spg-input.spg-input--error {
  box-shadow: 0 0 0 1px inset var(--ctr-editor-border-color-error, var(--sjs-semantic-red-background-500, #e50a3eff));
}

.spg-input-container {
  display: flex;
  justify-content: space-between;
  cursor: default;
  padding: var(--ctr-editor-padding-top, var(--sjs-spacing-x05)) var(--ctr-editor-padding-right, var(--sjs-spacing-x05))
    var(--ctr-editor-padding-bottom, var(--sjs-spacing-x05)) var(--ctr-editor-padding-left, var(--sjs-spacing-x05));
  align-items: center;
  gap: var(--ctr-editor-gap, var(--sjs-spacing-x05));
  box-shadow: inset 0 0 0 var(--ctr-editor-border-width, var(--sjs-stroke-x1)) var(--ctr-editor-border-color, var(--sjs-border-10, #dcdcdcff));
}

.spg-input-container--multiline {
  align-items: end;
  flex-direction: column;
  gap: 0;
  height: auto;

  sv-ng-question-comment {
    display: flex;
  }

  .spg-input-container__input {
    box-sizing: border-box;
    resize: none;
  }
}

.spg-input-container__input {
  @include ctrDefaultFont;
  flex-grow: 1;
  width: 100%;
  padding: var(--ctr-editor-content-margin-top, var(--sjs-spacing-x1)) var(--ctr-editor-content-margin-right, var(--sjs-spacing-x150))
    var(--ctr-editor-content-margin-bottom, var(--sjs-spacing-x1)) var(--ctr-editor-content-margin-left, var(--sjs-spacing-x150));

  color: var(--ctr-editor-content-text-color, var(--sjs-layer-3-foreground-100, #000000e6));
  outline: none;
  border: none;
  background-color: transparent;

  &::placeholder {
    color: var(--ctr-editor-content-text-color-placeholder, var(--sjs-layer-3-foreground-50, #00000080));
  }
}

.spg-input-container__input:disabled,
.spg-input-container__input:disabled::placeholder {
  opacity: var(--ctr-editor-content-text-opacity-disabled, 0.25);
  color: var(--ctr-editor-content-text-color-disabled, var(--sjs-layer-1-foreground-100, #000000e6));
  background-color: var(--ctr-editor-background-color-disabled, var(--sjs-layer-1-background-500, #ffffffff));
}

.spg-input-container__buttons-container {
  display: flex;
  gap: var(--ctr-editor-buttons-gap, var(--sjs-spacing-x05));
  align-self: stretch;
}
